Premium Content

JAVASCRIPT FUNDAMENTALS

Learn the core concepts of JavaScript programming

Beginner

Module 1: JavaScript Fundamentals

JavaScript is a versatile programming language that powers interactive web applications. It runs in browsers and on servers, making it essential for modern web development. Learn variables, data types, operators, and control structures.

Learning Objectives

Understand JavaScript syntax and basic structure
Master variable declaration with let, const, and var
Learn different data types and their uses
Use operators for mathematical and logical operations
Implement control flow with conditionals and loops
Create and call functions effectively

Try It Yourself:

JavaScript Code

// JavaScript Fundamentals - Variables and Data Types

// Variable Declaration
let message = "Hello, JavaScript!";
const PI = 3.14159;
var count = 10;

console.log(message);
console.log("PI value:", PI);
console.log("Count:", count);

// Data Types
const stringType = "This is a string";
const numberType = 42;
const booleanType = true;
const arrayType = [1, 2, 3, 4, 5];
const objectType = { name: "John", age: 30 };
const nullType = null;
const undefinedType = undefined;

console.log("--- Data Types ---");
console.log("String:", stringType);
console.log("Number:", numberType);
console.log("Boolean:", booleanType);
console.log("Array:", arrayType);
console.log("Object:", objectType);
console.log("Null:", nullType);
console.log("Undefined:", undefinedType);

// Operators
let a = 10;
let b = 5;

console.log("--- Operators ---");
console.log("Addition:", a + b);
console.log("Subtraction:", a - b);
console.log("Multiplication:", a * b);
console.log("Division:", a / b);
console.log("Modulus:", a % b);
console.log("Exponentiation:", a ** b);

// Comparison Operators
console.log("--- Comparison ---");
console.log("a > b:", a > b);
console.log("a < b:", a < b);
console.log("a === b:", a === b);
console.log("a !== b:", a !== b);

// Control Structures
console.log("--- Control Structures ---");

// If-else statement
if (a > b) {
    console.log("a is greater than b");
} else {
    console.log("a is not greater than b");
}

// For loop
console.log("For loop:");
for (let i = 0; i < 5; i++) {
    console.log("Iteration:", i);
}

// While loop
console.log("While loop:");
let i = 0;
while (i < 3) {
    console.log("While iteration:", i);
    i++;
}

// Functions
function greet(name) {
    return `Hello, ${name}!`;
}

const result = greet("Developer");
console.log("Function result:", result);

// Arrow function
const multiply = (x, y) => x * y;
console.log("Arrow function:", multiply(4, 5));

Execution Output

Click "Run JavaScript Code" to see the output of your code.

Practice Exercises

Exercise 1: Variable Practice

Create variables to store your name, age, and favorite programming language, then display them using console.log.

let name = "Your Name";
let age = 25;
let language = "JavaScript";
console.log(`My name is ${name}, I'm ${age} years old, and I love ${language}!`);

Exercise 2: Temperature Converter

Create a function that converts Celsius to Fahrenheit. The formula is: F = (C * 9/5) + 32

function celsiusToFahrenheit(celsius) {
    return (celsius * 9/5) + 32;
}

console.log("20°C is", celsiusToFahrenheit(20), "°F");
console.log("0°C is", celsiusToFahrenheit(0), "°F");

Quick Quiz

1. What is the difference between let, const, and var?

let and const are block-scoped, var is function-scoped. const cannot be reassigned. They are all the same, just different syntax const is for constants, let is for loops, var is for variables

Common Mistakes to Avoid

Using var instead of let/const in modern JavaScript
Confusing == (loose equality) with === (strict equality)
Forgetting that JavaScript is case-sensitive
Not understanding variable hoisting
Using reserved keywords as variable names

Key JavaScript Concepts:

Variables - let, const, and var declarations
Data Types - Strings, Numbers, Booleans, Objects, Arrays
Operators - Arithmetic, comparison, and logical operators
Control Flow - if/else, loops, switch statements
Functions - Regular functions and arrow functions
Scope - Global, function, and block scope
Type Coercion - Automatic type conversion

Premium Content

DATA STRUCTURES

Master JavaScript arrays, objects, and data manipulation

Beginner

Module 2: JavaScript Data Structures

JavaScript provides powerful data structures like arrays and objects for organizing and manipulating data. Learn how to work with collections, transform data, and use modern array methods for efficient programming.

Learning Objectives

Understand and use arrays and objects effectively
Master array methods like map, filter, and reduce
Work with nested data structures
Transform and manipulate complex data
Use object methods and property manipulation

Try It Yourself:

JavaScript Code

// JavaScript Arrays and Objects

// Array Creation and Methods
const fruits = ['apple', 'banana', 'orange', 'grape'];
const numbers = [1, 2, 3, 4, 5];

console.log("Original arrays:");
console.log("Fruits:", fruits);
console.log("Numbers:", numbers);

// Array Methods
console.log("--- Array Methods ---");

// Adding/Removing elements
fruits.push('mango');
console.log("After push:", fruits);

fruits.pop();
console.log("After pop:", fruits);

fruits.unshift('strawberry');
console.log("After unshift:", fruits);

fruits.shift();
console.log("After shift:", fruits);

// Array transformation
const doubledNumbers = numbers.map(num => num * 2);
console.log("Mapped (doubled):", doubledNumbers);

const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log("Filtered (even):", evenNumbers);

const sum = numbers.reduce((total, num) => total + num, 0);
console.log("Reduced (sum):", sum);

// Array searching
const foundFruit = fruits.find(fruit => fruit.length > 5);
console.log("Found fruit (length > 5):", foundFruit);

const hasApple = fruits.includes('apple');
console.log("Includes 'apple':", hasApple);

// Objects
const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    email: 'john.doe@example.com',
    hobbies: ['reading', 'coding', 'gaming'],
    address: {
        street: '123 Main St',
        city: 'Anytown',
        country: 'USA'
    },
    getFullName: function() {
        return `${this.firstName} ${this.lastName}`;
    },
    isAdult: function() {
        return this.age >= 18;
    }
};

console.log("--- Object Operations ---");
console.log("Person object:", person);
console.log("Full name:", person.getFullName());
console.log("Is adult:", person.isAdult());
console.log("City:", person.address.city);

// Object manipulation
console.log("--- Object Manipulation ---");

// Adding properties
person.occupation = 'Developer';
console.log("After adding occupation:", person);

// Deleting properties
delete person.email;
console.log("After deleting email:", person);

// Object keys and values
const keys = Object.keys(person);
console.log("Object keys:", keys);

const values = Object.values(person);
console.log("Object values:", values);

// Complex data structure
const users = [
    { id: 1, name: 'Alice', age: 25, active: true },
    { id: 2, name: 'Bob', age: 30, active: false },
    { id: 3, name: 'Charlie', age: 35, active: true },
    { id: 4, name: 'Diana', age: 28, active: true }
];

console.log("--- Complex Data Structure ---");
console.log("Users array:", users);

// Filter active users
const activeUsers = users.filter(user => user.active);
console.log("Active users:", activeUsers);

// Get user names
const userNames = users.map(user => user.name);
console.log("User names:", userNames);

// Find user by id
const userById = users.find(user => user.id === 2);
console.log("User with ID 2:", userById);

// Calculate average age
const averageAge = users.reduce((sum, user) => sum + user.age, 0) / users.length;
console.log("Average age:", averageAge);

Execution Output

Click "Run JavaScript Code" to see the output of your code.

Practice Exercises

Exercise 1: Array Manipulation

Create an array of numbers from 1 to 10. Then create a new array with only the even numbers multiplied by 3.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers
    .filter(num => num % 2 === 0)
    .map(num => num * 3);
console.log(result); // [6, 12, 18, 24, 30]

Exercise 2: Object Transformation

Given an array of product objects, calculate the total value of all products (price * quantity).

const products = [
    { name: "Laptop", price: 1000, quantity: 2 },
    { name: "Phone", price: 500, quantity: 5 },
    { name: "Tablet", price: 300, quantity: 3 }
];

const totalValue = products.reduce((sum, product) => {
    return sum + (product.price * product.quantity);
}, 0);

console.log("Total value:", totalValue); // 1000*2 + 500*5 + 300*3 = 5400

Quick Quiz

1. What does the map() method do?

Transforms each element in an array and returns a new array Filters elements based on a condition Reduces the array to a single value

Common Mistakes to Avoid

Modifying arrays while iterating over them
Confusing array methods (map vs forEach vs filter)
Not handling edge cases in array operations
Mutating objects unintentionally
Using for-in loops for arrays (use for-of instead)

JavaScript Data Structure Features:

Arrays - Ordered collections with various methods
Objects - Key-value pairs for structured data
Array Methods - map, filter, reduce, find, etc.
Object Manipulation - Adding, deleting, and modifying properties
Nested Structures - Objects within arrays and vice versa
Destructuring - Extracting values from arrays and objects
Spread Operator - Copying and merging arrays/objects

Premium Content

FUNCTIONS & DOM

Master functions and DOM manipulation

Intermediate

Module 3: Functions & DOM Manipulation

Functions are the building blocks of JavaScript applications. Learn different function types, scope, closures, and how to manipulate the Document Object Model (DOM) to create dynamic web pages.

Learning Objectives

Understand different function types and when to use them
Master scope, closures, and higher-order functions
Learn DOM selection and manipulation techniques
Handle user events and interactions
Create dynamic, interactive web content

Try It Yourself:

JavaScript Code

// Functions and DOM Manipulation

// Different function types
console.log("--- Function Types ---");

// Function declaration
function sayHello(name) {
    return `Hello, ${name}!`;
}
console.log("Function declaration:", sayHello("Alice"));

// Function expression
const sayGoodbye = function(name) {
    return `Goodbye, ${name}!`;
};
console.log("Function expression:", sayGoodbye("Bob"));

// Arrow function
const add = (a, b) => a + b;
console.log("Arrow function:", add(5, 3));

// Immediately Invoked Function Expression (IIFE)
(function() {
    console.log("IIFE executed immediately!");
})();

// Higher-order functions
function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log("Double of 5:", double(5));
console.log("Triple of 5:", triple(5));

// Closures
function createCounter() {
    let count = 0;
    
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log("--- Closures Example ---");
console.log("Initial count:", counter.getCount());
console.log("After increment:", counter.increment());
console.log("After increment:", counter.increment());
console.log("After decrement:", counter.decrement());

// DOM Manipulation Examples
console.log("--- DOM Manipulation ---");

// Creating elements dynamically
const container = document.createElement('div');
container.id = 'demo-container';
container.innerHTML = `
    <h3>DOM Manipulation Demo</h3>
    <p>This content was created with JavaScript!</p>
    <button id="demo-btn">Click Me</button>
    <ul id="demo-list"></ul>
`;

// Adding to the page
document.body.appendChild(container);

// Adding event listener
document.getElementById('demo-btn').addEventListener('click', function() {
    const list = document.getElementById('demo-list');
    const newItem = document.createElement('li');
    newItem.textContent = `Item ${list.children.length + 1} - clicked at ${new Date().toLocaleTimeString()}`;
    list.appendChild(newItem);
    
    console.log("Button clicked! New item added.");
});

// DOM Querying and Manipulation
const demoElements = {
    changeText: function() {
        const heading = document.querySelector('#demo-container h3');
        heading.textContent = 'Text Changed with JavaScript!';
        heading.style.color = 'var(--primary)';
    },
    
    toggleVisibility: function() {
        const list = document.getElementById('demo-list');
        list.style.display = list.style.display === 'none' ? 'block' : 'none';
    },
    
    addStyles: function() {
        const container = document.getElementById('demo-container');
        container.style.border = '2px solid var(--primary)';
        container.style.borderRadius = '8px';
        container.style.padding = '1rem';
        container.style.margin = '1rem 0';
        container.style.background = 'var(--primary-extra-light)';
    }
};

// Demonstrate DOM methods
console.log("DOM methods are ready to use!");
console.log("Try calling: demoElements.changeText()");
console.log("Try calling: demoElements.toggleVisibility()");
console.log("Try calling: demoElements.addStyles()");

Execution Output

Click "Run JavaScript Code" to see the output of your code.

Practice Exercises

Exercise 1: Todo List Function

Create a function that manages a simple todo list. It should be able to add items, remove items, and list all items.

function createTodoList() {
    let todos = [];
    
    return {
        add: function(item) {
            todos.push(item);
            console.log(`Added: ${item}`);
        },
        remove: function(index) {
            if (index >= 0 && index < todos.length) {
                const removed = todos.splice(index, 1);
                console.log(`Removed: ${removed[0]}`);
            }
        },
        list: function() {
            console.log("Todo List:");
            todos.forEach((todo, index) => {
                console.log(`${index + 1}. ${todo}`);
            });
        }
    };
}

const myTodos = createTodoList();
myTodos.add("Learn JavaScript");
myTodos.add("Build a project");
myTodos.list();
myTodos.remove(0);
myTodos.list();

Exercise 2: DOM Color Changer

Create a function that changes the background color of a page when a button is clicked.

// Create button and add to page
const colorBtn = document.createElement('button');
colorBtn.textContent = 'Change Background Color';
document.body.appendChild(colorBtn);

// Add click event
colorBtn.addEventListener('click', function() {
    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.backgroundColor = randomColor;
    console.log(`Background color changed to: ${randomColor}`);
});

Quick Quiz

1. What is a closure in JavaScript?

A function that has access to variables from its outer scope even after the outer function has returned A function that closes the browser window A function that doesn't return any value

Common Mistakes to Avoid

Forgetting to use 'this' keyword in object methods
Not understanding function scope vs block scope
Adding event listeners to elements that don't exist yet
Not preventing default behavior in event handlers
Creating memory leaks with event listeners

Functions & DOM Features:

Function Types - Declarations, expressions, arrow functions
Scope & Closures - Variable accessibility and private data
Higher-Order Functions - Functions that take/return other functions
DOM Selection - Selecting elements with querySelector and getElementById
DOM Manipulation - Creating, modifying, and removing elements
Event Handling - Responding to user interactions
Event Delegation - Efficient event handling for dynamic content

Premium Content

ES6+ FEATURES

Modern JavaScript features and syntax

Intermediate

Module 4: ES6+ Modern JavaScript Features

ES6 (ECMAScript 2015) introduced many powerful features that make JavaScript more expressive and easier to work with. Learn destructuring, template literals, modules, and other modern syntax.

Learning Objectives

Master template literals for string interpolation
Use destructuring to extract values from arrays and objects
Apply spread and rest operators effectively
Work with enhanced object literals
Use default parameters and optional chaining

Try It Yourself:

JavaScript Code

// ES6+ Modern JavaScript Features

// 1. Template Literals
console.log("--- Template Literals ---");

const name = "Alice";
const age = 28;
const country = "Wonderland";

// Traditional concatenation
const oldWay = "Hello, my name is " + name + ", I'm " + age + " years old, and I'm from " + country + ".";
console.log("Old way:", oldWay);

// Template literal
const newWay = `Hello, my name is ${name}, I'm ${age} years old, and I'm from ${country}.`;
console.log("New way:", newWay);

// Multi-line strings
const multiLine = `
    This is a multi-line string
    that preserves line breaks
    and indentation.
`;
console.log("Multi-line string:", multiLine);

// 2. Destructuring
console.log("--- Destructuring ---");

// Array destructuring
const colors = ['red', 'green', 'blue', 'yellow'];
const [firstColor, secondColor, ...restColors] = colors;
console.log("First color:", firstColor);
console.log("Second color:", secondColor);
console.log("Rest colors:", restColors);

// Object destructuring
const user = {
    username: 'jsdev',
    email: 'jsdev@example.com',
    preferences: {
        theme: 'dark',
        language: 'en'
    }
};

const { username, email, preferences: { theme } } = user;
console.log("Username:", username);
console.log("Email:", email);
console.log("Theme:", theme);

// 3. Spread and Rest Operators
console.log("--- Spread and Rest Operators ---");

// Spread with arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log("Combined arrays:", combined);

// Spread with objects
const defaults = { theme: 'light', sound: true, notifications: false };
const userSettings = { ...defaults, theme: 'dark' };
console.log("User settings:", userSettings);

// Rest parameters
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log("Sum of numbers:", sum(1, 2, 3, 4, 5));

// 4. Enhanced Object Literals
console.log("--- Enhanced Object Literals ---");

const firstName = 'John';
const lastName = 'Doe';

// Shorthand property names
const person = { firstName, lastName };
console.log("Person object:", person);

// Computed property names
const propName = 'age';
const dynamicObj = {
    [propName]: 30,
    ['full' + 'Name']: 'John Doe'
};
console.log("Dynamic object:", dynamicObj);

// Method shorthand
const calculator = {
    add(a, b) {
        return a + b;
    },
    multiply(a, b) {
        return a * b;
    }
};
console.log("Calculator add:", calculator.add(5, 3));
console.log("Calculator multiply:", calculator.multiply(5, 3));

// 5. Default Parameters
console.log("--- Default Parameters ---");

function createUser(name, age = 18, isActive = true) {
    return { name, age, isActive };
}

console.log("User with defaults:", createUser("Bob"));
console.log("User with custom age:", createUser("Alice", 25));
console.log("User with all custom:", createUser("Charlie", 30, false));

// 6. Optional Chaining and Nullish Coalescing
console.log("--- Optional Chaining and Nullish Coalescing ---");

const company = {
    name: 'Tech Corp',
    address: {
        city: 'San Francisco',
        zip: '94105'
    }
};

// Optional chaining
console.log("Company city:", company?.address?.city);
console.log("Non-existent property:", company?.departments?.[0]?.name);

// Nullish coalescing
const userTheme = null;
const defaultTheme = 'light';
const theme = userTheme ?? defaultTheme;
console.log("Theme (nullish coalescing):", theme);

const emptyString = '';
const defaultValue = 'default';
const result = emptyString ?? defaultValue;
console.log("Empty string with nullish coalescing:", result);

console.log("🎉 All ES6+ features demonstrated successfully!");

Execution Output

Click "Run JavaScript Code" to see the output of your code.

Practice Exercises

Exercise 1: Object Destructuring

Given a user object, use destructuring to extract the name, email, and city properties. Provide default values for any missing properties.

const user = {
    name: "Sarah",
    email: "sarah@example.com",
    address: {
        city: "New York",
        country: "USA"
    }
};

// Destructure with defaults
const { 
    name, 
    email, 
    address: { city = "Unknown" } 
} = user;

console.log(`Name: ${name}, Email: ${email}, City: ${city}`);

Exercise 2: Spread Operator Practice

Create a function that merges two objects without mutating the original objects. If there are conflicting properties, the second object should override the first.

function mergeObjects(obj1, obj2) {
    return { ...obj1, ...obj2 };
}

const defaults = { theme: 'light', language: 'en', fontSize: 14 };
const userPrefs = { theme: 'dark', fontSize: 16 };

const merged = mergeObjects(defaults, userPrefs);
console.log(merged); // { theme: 'dark', language: 'en', fontSize: 16 }

Quick Quiz

1. What is the difference between the spread operator and rest parameters?

Spread expands elements, rest collects them into an array They are the same thing with different names Spread is for arrays, rest is for objects

Common Mistakes to Avoid

Confusing template literals with regular strings
Not providing default values in destructuring
Using spread operator with non-iterables
Confusing nullish coalescing with logical OR
Overusing optional chaining when values are expected

ES6+ JavaScript Features:

Template Literals - String interpolation and multi-line strings
Destructuring - Extracting values from arrays and objects
Spread/Rest Operators - Working with arrays and function parameters
Enhanced Object Literals - Shorthand properties and methods
Default Parameters - Function parameters with default values
Optional Chaining - Safe navigation through object properties
Nullish Coalescing - Providing fallback values for null/undefined
Modules - Import/export for code organization

Premium Content

ASYNC JAVASCRIPT

Master asynchronous programming patterns

Intermediate

Module 5: Asynchronous JavaScript

JavaScript uses asynchronous programming to handle tasks that take time, like API calls or file operations. Learn callbacks, promises, and async/await to write efficient, non-blocking code.

Learning Objectives

Understand the JavaScript event loop and concurrency model
Master promises for handling asynchronous operations
Use async/await for cleaner asynchronous code
Handle errors in asynchronous operations
Work with multiple asynchronous operations

Try It Yourself:

JavaScript Code

// Asynchronous JavaScript

console.log("--- Asynchronous JavaScript Examples ---");

// 1. Callbacks (Traditional Approach)
console.log("1. Callbacks");

function fetchDataWithCallback(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = { id: 1, name: "Callback Data" };
        callback(null, data);
    }, 1000);
}

fetchDataWithCallback((error, data) => {
    if (error) {
        console.error("Error:", error);
    } else {
        console.log("Callback result:", data);
    }
});

// 2. Promises (ES6)
console.log("2. Promises");

function fetchDataWithPromise() {
    return new Promise((resolve, reject) => {
        console.log("Promise: Fetching data...");
        setTimeout(() => {
            const success = Math.random() > 0.3;
            if (success) {
                resolve({ id: 2, name: "Promise Data" });
            } else {
                reject("Promise: Failed to fetch data");
            }
        }, 1500);
    });
}

fetchDataWithPromise()
    .then(data => {
        console.log("Promise resolved:", data);
        return { ...data, processed: true };
    })
    .then(processedData => {
        console.log("Promise chain:", processedData);
    })
    .catch(error => {
        console.error("Promise rejected:", error);
    })
    .finally(() => {
        console.log("Promise: Operation completed");
    });

// 3. Promise Utilities
console.log("3. Promise Utilities");

// Promise.all - Wait for all promises
const promise1 = Promise.resolve("First value");
const promise2 = new Promise(resolve => setTimeout(() => resolve("Second value"), 500));
const promise3 = fetchDataWithPromise();

Promise.all([promise1, promise2, promise3])
    .then(results => {
        console.log("Promise.all results:", results);
    })
    .catch(error => {
        console.error("Promise.all error:", error);
    });

// Promise.race - First to resolve/reject
Promise.race([promise2, promise3])
    .then(result => {
        console.log("Promise.race winner:", result);
    });

// 4. Async/Await (ES2017)
console.log("4. Async/Await");

async function fetchDataWithAsync() {
    try {
        console.log("Async: Starting fetch...");
        
        // Simulate multiple async operations
        const userPromise = new Promise(resolve => 
            setTimeout(() => resolve({ id: 1, name: "Async User" }), 800)
        );
        
        const postsPromise = new Promise(resolve => 
            setTimeout(() => resolve([{ id: 1, title: "Post 1" }, { id: 2, title: "Post 2" }]), 600)
        );
        
        // Wait for both promises
        const [user, posts] = await Promise.all([userPromise, postsPromise]);
        
        console.log("Async result - User:", user);
        console.log("Async result - Posts:", posts);
        
        return { user, posts };
        
    } catch (error) {
        console.error("Async error:", error);
        throw error;
    }
}

// Using async function
fetchDataWithAsync()
    .then(result => {
        console.log("Final async result:", result);
    })
    .catch(error => {
        console.error("Final async error:", error);
    });

// 5. Real-world async example
console.log("5. Real-world Example");

async function loadUserProfile(userId) {
    try {
        // Simulate API calls
        const userResponse = await new Promise(resolve => 
            setTimeout(() => resolve({ id: userId, name: "John Doe" }), 800)
        );
        
        const postsResponse = await new Promise(resolve => 
            setTimeout(() => resolve([
                { id: 1, title: "My First Post", content: "Hello world!" },
                { id: 2, title: "Learning JavaScript", content: "Async/await is awesome!" }
            ]), 600)
        );
        
        const friendsResponse = await new Promise(resolve => 
            setTimeout(() => resolve([
                { id: 2, name: "Alice" },
                { id: 3, name: "Bob" }
            ]), 400)
        );
        
        return {
            user: userResponse,
            posts: postsResponse,
            friends: friendsResponse
        };
        
    } catch (error) {
        console.error("Failed to load user profile:", error);
        throw error;
    }
}

// Load user profile
loadUserProfile(1)
    .then(profile => {
        console.log("User profile loaded:", profile);
    })
    .catch(error => {
        console.error("Profile loading failed:", error);
    });

console.log("✅ All async examples are running!");

Execution Output

Click "Run JavaScript Code" to see the output of your code.

Practice Exercises

Exercise 1: Promise-based Timer

Create a function that returns a promise which resolves after a specified number of milliseconds.

function delay(ms) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`Timer completed after ${ms}ms`);
        }, ms);
    });
}

// Usage
delay(2000)
    .then(message => {
        console.log(message);
    });

// Using async/await
async function runTimer() {
    console.log("Starting timer...");
    const result = await delay(1500);
    console.log(result);
}

runTimer();

Exercise 2: Sequential API Calls

Create a function that makes multiple API calls sequentially, where each call depends on the result of the previous one.

// Simulated API functions
function getUser(userId) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ id: userId, name: "User " + userId });
        }, 500);
    });
}

function getUserPosts(userId) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve([
                { id: 1, title: "Post 1 from user " + userId },
                { id: 2, title: "Post 2 from user " + userId }
            ]);
        }, 300);
    });
}

function getPostComments(postId) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve([
                { id: 1, text: "Great post!" },
                { id: 2, text: "Thanks for sharing" }
            ]);
        }, 200);
    });
}

// Sequential execution
async function getUserData(userId) {
    try {
        const user = await getUser(userId);
        console.log("User:", user);
        
        const posts = await getUserPosts(user.id);
        console.log("Posts:", posts);
        
        const comments = await getPostComments(posts[0].id);
        console.log("Comments:", comments);
        
        return { user, posts, comments };
    } catch (error) {
        console.error("Error:", error);
    }
}

getUserData(1);

Quick Quiz

1. What is the main advantage of async/await over traditional promises?

It makes asynchronous code look and behave more like synchronous code It's faster than using promises It doesn't require error handling

Common Mistakes to Avoid

Forgetting to handle promise rejections
Using async/await without proper error handling
Creating "callback hell" with nested callbacks
Not understanding the event loop and microtask queue
Blocking the event loop with synchronous operations

Asynchronous JavaScript Features:

Callbacks - Traditional async programming pattern
Promises - Modern approach for handling async operations
Async/Await - Syntactic sugar for promises, making async code look synchronous
Promise Methods - Promise.all, Promise.race, Promise.any
Error Handling - try/catch with async/await
Event Loop - Understanding JavaScript's execution model
Microtasks vs Macrotasks - Priority in the event loop

Premium Content

APIS & MODERN JS

Work with APIs and modern JavaScript patterns

Advanced

Module 6: APIs & Modern JavaScript Patterns

Modern JavaScript applications heavily rely on APIs for data exchange. Learn how to work with REST APIs, handle HTTP requests, implement modern patterns like modules, and use advanced JavaScript features.

Learning Objectives

Master the Fetch API for HTTP requests
Understand RESTful API principles and best practices
Implement common JavaScript design patterns
Handle errors and implement retry mechanisms
Work with complex data transformations

Try It Yourself:

JavaScript Code

// APIs & Modern JavaScript Patterns

console.log("--- APIs & Modern JavaScript ---");

// 1. Fetch API - Modern way to make HTTP requests
console.log("1. Fetch API Examples");

// Basic GET request
async function fetchUsers() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const users = await response.json();
        console.log("Fetched users:", users.slice(0, 2)); // Show first 2 users
        
        return users;
    } catch (error) {
        console.error("Error fetching users:", error);
    }
}

// POST request example
async function createPost() {
    try {
        const newPost = {
            title: 'My New Post',
            body: 'This is the content of my post',
            userId: 1
        };
        
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(newPost)
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const createdPost = await response.json();
        console.log("Created post:", createdPost);
        
        return createdPost;
    } catch (error) {
        console.error("Error creating post:", error);
    }
}

// Execute API calls
fetchUsers();
createPost();

// 2. Modern JavaScript Patterns
console.log("2. Modern JavaScript Patterns");

// Factory Pattern
function createUser(name, email, role = 'user') {
    return {
        name,
        email,
        role,
        createdAt: new Date(),
        isAdmin() {
            return this.role === 'admin';
        },
        getProfile() {
            return `${this.name} (${this.email}) - ${this.role}`;
        }
    };
}

const admin = createUser('Admin User', 'admin@example.com', 'admin');
const user = createUser('Regular User', 'user@example.com');

console.log("Factory pattern - Admin:", admin.getProfile());
console.log("Factory pattern - User:", user.getProfile());

// Module Pattern
const UserModule = (function() {
    let users = [];
    let nextId = 1;
    
    function addUser(name, email) {
        const user = {
            id: nextId++,
            name,
            email,
            createdAt: new Date()
        };
        users.push(user);
        return user;
    }
    
    function getUser(id) {
        return users.find(user => user.id === id);
    }
    
    function getAllUsers() {
        return [...users]; // Return copy to prevent direct manipulation
    }
    
    function deleteUser(id) {
        const index = users.findIndex(user => user.id === id);
        if (index !== -1) {
            return users.splice(index, 1)[0];
        }
        return null;
    }
    
    return {
        addUser,
        getUser,
        getAllUsers,
        deleteUser
    };
})();

// Using the module
UserModule.addUser('John Doe', 'john@example.com');
UserModule.addUser('Jane Smith', 'jane@example.com');
console.log("Module pattern - All users:", UserModule.getAllUsers());

// 3. Modern Array and Object Methods
console.log("3. Modern Array and Object Methods");

const products = [
    { id: 1, name: 'Laptop', price: 999, category: 'electronics', inStock: true },
    { id: 2, name: 'Phone', price: 699, category: 'electronics', inStock: false },
    { id: 3, name: 'Book', price: 29, category: 'education', inStock: true },
    { id: 4, name: 'Headphones', price: 199, category: 'electronics', inStock: true },
    { id: 5, name: 'Notebook', price: 15, category: 'education', inStock: false }
];

// Complex data transformations
const productAnalysis = products
    .filter(product => product.inStock)
    .map(product => ({
        ...product,
        priceWithTax: product.price * 1.08, // 8% tax
        priceCategory: product.price > 500 ? 'premium' : 'standard'
    }))
    .reduce((acc, product) => {
        if (!acc[product.category]) {
            acc[product.category] = [];
        }
        acc[product.category].push(product);
        return acc;
    }, {});

console.log("Product analysis:", productAnalysis);

// 4. Error Handling Patterns
console.log("4. Error Handling Patterns");

class CustomAPIError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = 'CustomAPIError';
        this.statusCode = statusCode;
        this.timestamp = new Date().toISOString();
    }
}

async function fetchWithRetry(url, retries = 3, delay = 1000) {
    for (let attempt = 1; attempt <= retries; attempt++) {
        try {
            console.log(`Attempt ${attempt} to fetch ${url}`);
            const response = await fetch(url);
            
            if (!response.ok) {
                throw new CustomAPIError(`HTTP ${response.status}`, response.status);
            }
            
            return await response.json();
        } catch (error) {
            console.error(`Attempt ${attempt} failed:`, error.message);
            
            if (attempt === retries) {
                throw new CustomAPIError(`Failed after ${retries} attempts: ${error.message}`, 500);
            }
            
            // Wait before retrying
            await new Promise(resolve => setTimeout(resolve, delay * attempt));
        }
    }
}

// Test the retry mechanism
fetchWithRetry('https://jsonplaceholder.typicode.com/posts/1')
    .then(data => console.log("Retry success:", data))
    .catch(error => console.error("Retry failed:", error.message));

console.log("🚀 All modern JavaScript patterns demonstrated!");

Execution Output

Click "Run JavaScript Code" to see the output of your code.

Practice Exercises

Exercise 1: API Service Class

Create a reusable API service class that handles GET, POST, PUT, and DELETE requests with error handling and authentication.

class ApiService {
    constructor(baseURL, token = null) {
        this.baseURL = baseURL;
        this.token = token;
    }
    
    setToken(token) {
        this.token = token;
    }
    
    async request(endpoint, options = {}) {
        const url = `${this.baseURL}${endpoint}`;
        const config = {
            headers: {
                'Content-Type': 'application/json',
                ...(this.token && { 'Authorization': `Bearer ${this.token}` }),
                ...options.headers
            },
            ...options
        };
        
        try {
            const response = await fetch(url, config);
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            return await response.json();
        } catch (error) {
            console.error('API Request failed:', error);
            throw error;
        }
    }
    
    get(endpoint) {
        return this.request(endpoint);
    }
    
    post(endpoint, data) {
        return this.request(endpoint, {
            method: 'POST',
            body: JSON.stringify(data)
        });
    }
    
    put(endpoint, data) {
        return this.request(endpoint, {
            method: 'PUT',
            body: JSON.stringify(data)
        });
    }
    
    delete(endpoint) {
        return this.request(endpoint, {
            method: 'DELETE'
        });
    }
}

// Usage example
const api = new ApiService('https://jsonplaceholder.typicode.com');
api.get('/users/1')
    .then(user => console.log('User:', user))
    .catch(error => console.error('Error:', error));

Exercise 2: Data Transformation Pipeline

Create a function that processes an array of raw data through multiple transformation steps and returns the final result.

// Sample raw data
const rawData = [
    { id: 1, name: 'john doe', age: '25', salary: '50000', department: 'IT' },
    { id: 2, name: 'jane smith', age: '30', salary: '60000', department: 'HR' },
    { id: 3, name: 'bob johnson', age: '35', salary: '70000', department: 'IT' }
];

function processEmployeeData(data) {
    return data
        // Step 1: Normalize names
        .map(employee => ({
            ...employee,
            name: employee.name
                .split(' ')
                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                .join(' ')
        }))
        // Step 2: Convert string numbers to actual numbers
        .map(employee => ({
            ...employee,
            age: parseInt(employee.age),
            salary: parseFloat(employee.salary)
        }))
        // Step 3: Add calculated fields
        .map(employee => ({
            ...employee,
            monthlySalary: (employee.salary / 12).toFixed(2),
            isSenior: employee.age > 30
        }))
        // Step 4: Group by department
        .reduce((acc, employee) => {
            if (!acc[employee.department]) {
                acc[employee.department] = [];
            }
            acc[employee.department].push(employee);
            return acc;
        }, {});
}

const processedData = processEmployeeData(rawData);
console.log('Processed data:', processedData);

Quick Quiz

1. What is the main advantage of using the Factory Pattern?

It encapsulates object creation and provides a flexible way to create objects It makes code execution faster It automatically handles memory management

Common Mistakes to Avoid

Not handling API errors and edge cases
Making too many API calls without rate limiting
Not validating data from external APIs
Overcomplicating design patterns when simple solutions suffice
Not considering performance with large data transformations

APIs & Modern JavaScript Features:

Fetch API - Modern way to make HTTP requests
RESTful APIs - Working with REST endpoints
Design Patterns - Factory, Module, Singleton patterns
Error Handling - Custom errors and retry mechanisms
Data Transformation - Complex array and object manipulations
Modern Syntax - Latest JavaScript features and best practices
Performance - Optimizing JavaScript applications

PRACTICE PLAYGROUND

Experiment with JavaScript concepts

Your JavaScript Playground: Try Your Own JavaScript Code

Use this space to experiment with everything you've learned about JavaScript web development. Try different data structures, functions, APIs, and modern patterns to see how they work. This is your sandbox to practice and explore the art of JavaScript programming.

Project Ideas to Try

Build a complete e-commerce cart system
Create a weather app that fetches data from an API
Implement a task manager with local storage
Build a simple game like tic-tac-toe or memory match
Create a data visualization dashboard

JavaScript Code

// JavaScript Playground - Try Your Own Code!

/*
Experiment with:
- Custom data structures and algorithms
- Complex functions and business logic
- DOM manipulation and event handling
- API calls and data fetching
- Async/await patterns
- Modern JavaScript features
- Your own creative ideas!
*/

// Example: E-commerce Cart System
class ShoppingCart {
    constructor() {
        this.items = [];
        this.total = 0;
    }
    
    addItem(product, quantity = 1) {
        const existingItem = this.items.find(item => item.product.id === product.id);
        
        if (existingItem) {
            existingItem.quantity += quantity;
        } else {
            this.items.push({ product, quantity });
        }
        
        this.calculateTotal();
        console.log(`Added ${quantity} x ${product.name} to cart`);
    }
    
    removeItem(productId) {
        this.items = this.items.filter(item => item.product.id !== productId);
        this.calculateTotal();
        console.log(`Removed item ${productId} from cart`);
    }
    
    calculateTotal() {
        this.total = this.items.reduce((sum, item) => {
            return sum + (item.product.price * item.quantity);
        }, 0);
    }
    
    getCartSummary() {
        return {
            itemCount: this.items.reduce((sum, item) => sum + item.quantity, 0),
            total: this.total,
            items: this.items.map(item => ({
                name: item.product.name,
                quantity: item.quantity,
                subtotal: item.product.price * item.quantity
            }))
        };
    }
    
    applyDiscount(discountPercent) {
        const discount = this.total * (discountPercent / 100);
        const discountedTotal = this.total - discount;
        console.log(`Applied ${discountPercent}% discount: $${discount.toFixed(2)} off`);
        return discountedTotal;
    }
}

// Sample products
const products = [
    { id: 1, name: "JavaScript Book", price: 29.99 },
    { id: 2, name: "Web Development Course", price: 99.99 },
    { id: 3, name: "Programming Stickers", price: 4.99 }
];

// Test the shopping cart
const cart = new ShoppingCart();

// Add some items
cart.addItem(products[0], 2); // 2 JavaScript Books
cart.addItem(products[1], 1); // 1 Web Development Course
cart.addItem(products[2], 3); // 3 Programming Stickers

// Get cart summary
const summary = cart.getCartSummary();
console.log("Cart Summary:", summary);

// Apply discount
const finalTotal = cart.applyDiscount(10);
console.log("Final total after discount: $" + finalTotal.toFixed(2));

// Your experiments go here!
// Try creating:
// - Custom classes and inheritance
// - Complex algorithms
// - API integrations
// - DOM manipulation functions
// - Async data processing
// - Error handling systems
// - Your own creative projects!

console.log("Welcome to the JavaScript Playground!");
console.log("Modify the code above to experiment with JavaScript concepts.");

Code Analysis

Practice Ideas for Your JavaScript Playground:

JavaScript Development Challenges:

Complex Applications: Build e-commerce, social media, or CMS systems
Algorithms: Implement sorting, searching, and data structure algorithms
API Development: Create RESTful APIs with error handling
DOM Manipulation: Build interactive UI components and animations
Performance: Optimize code for speed and memory usage

Sample Projects to Try:

Task Manager: Complete todo app with categories and deadlines
Weather App: Fetch and display weather data from APIs
Social Media Feed: Dynamic content loading and interaction
E-commerce Site: Product catalog, cart, and checkout system
Game Development: Simple browser games with JavaScript

Remember: The key to mastering JavaScript is practice and experimentation. Don't be afraid to try new things and make mistakes!

Advanced JavaScript Challenges:

Implement complex applications:
- Real-time chat application
- Data visualization dashboard
- Payment integration system
- Search functionality with filters
Create advanced features:
- WebSocket connections for real-time updates
- Progressive Web App (PWA) capabilities
- Offline functionality with service workers
- Performance monitoring and optimization
Practice modern patterns:
- Component-based architecture
- State management patterns
- Functional programming techniques
- Test-driven development
Explore JavaScript ecosystem:
- Build tools like Webpack and Vite
- Testing frameworks like Jest
- TypeScript for type safety
- Modern frameworks like React, Vue, or Angular

Tips & Resources:

Start with simple projects and gradually increase complexity
Use version control (git) to track your progress
Read and understand JavaScript specification (ECMAScript)
Practice debugging with browser developer tools
Study the MDN Web Docs thoroughly
Join JavaScript communities and contribute to open source

JAVASCRIPT FUNDAMENTALS

Learn the core concepts of JavaScript programming

Module 1: JavaScript Fundamentals

Learning Objectives

Try It Yourself:

Practice Exercises

Exercise 1: Variable Practice

Exercise 2: Temperature Converter

Quick Quiz

Common Mistakes to Avoid

Key JavaScript Concepts:

DATA STRUCTURES

Master JavaScript arrays, objects, and data manipulation

Module 2: JavaScript Data Structures

Learning Objectives

Try It Yourself:

Practice Exercises

Exercise 1: Array Manipulation

Exercise 2: Object Transformation

Quick Quiz

Common Mistakes to Avoid

JavaScript Data Structure Features:

FUNCTIONS & DOM

Master functions and DOM manipulation

Module 3: Functions & DOM Manipulation

Learning Objectives

Try It Yourself:

Practice Exercises

Exercise 1: Todo List Function

Exercise 2: DOM Color Changer

Quick Quiz

Common Mistakes to Avoid

Functions & DOM Features:

ES6+ FEATURES

Modern JavaScript features and syntax

Module 4: ES6+ Modern JavaScript Features

Learning Objectives

Try It Yourself:

Practice Exercises

Exercise 1: Object Destructuring

Exercise 2: Spread Operator Practice

Quick Quiz

Common Mistakes to Avoid

ES6+ JavaScript Features:

ASYNC JAVASCRIPT

Master asynchronous programming patterns

Module 5: Asynchronous JavaScript

Learning Objectives

Try It Yourself:

Practice Exercises

Exercise 1: Promise-based Timer

Exercise 2: Sequential API Calls

Quick Quiz

Common Mistakes to Avoid

Asynchronous JavaScript Features:

APIS & MODERN JS

Work with APIs and modern JavaScript patterns

Module 6: APIs & Modern JavaScript Patterns

Learning Objectives

Try It Yourself:

Practice Exercises

Exercise 1: API Service Class

Exercise 2: Data Transformation Pipeline

Quick Quiz

Common Mistakes to Avoid

APIs & Modern JavaScript Features:

PRACTICE PLAYGROUND

Experiment with JavaScript concepts

Your JavaScript Playground: Try Your Own JavaScript Code

Project Ideas to Try

Practice Ideas for Your JavaScript Playground:

JavaScript Development Challenges:

Sample Projects to Try:

Advanced JavaScript Challenges:

Tips & Resources:

Unlock Premium SkillMynte JavaScript Content

Advanced JavaScript Courses

JavaScript Certification

Expert Mentorship

Monthly